<template>
  <div>
    <h2>{{data.title}}</h2>
      <div class="timeBox">
        <span v-if="data.create_time" class="timer"><i class="iconfont icon-date"></i>{{data.create_time | timer()}}</span>
        <span><i class="el-icon-view"></i>{{data.visited}}</span>
      </div>
          <el-image
          style="width: 600px; height: 500px"
          :src="data.img"
          fit=cover></el-image>
      <!-- 具体文章内容 -->
      <div class="detail contenttext" >
        <mavon-editor v-model="data.content"
          defaultOpen="preview"
          :toolbarsFlag="false"
          :subfield="false"
          codeStyle="atom-one-dark"
          :boxShadow="false"
          style = "white-space: pre-wrap"
          >
        </mavon-editor>
      </div>
  </div>
</template>

<script>
  export default {
    props:['data'],
    filters:{
      timer(str){
        return str.substring(0,9);
      },
    },
    methods:{
      // getArtcileByID(){
      //   this.$http.get(`/article/${this.id}`).then(res => {
      //     this.data = res.data.data;
      //   })
      // },
      // getArtcileByID(){
      //   // const id = this.$route.params.id
      //   this.$http.get(`/article/${this.data.id}`).then(res => {
      //     this.data = res.data.data;
      //   })
    },
 }
</script>

<style lang="scss" scoped>
.timer {
  margin-right: 15px;
}
.timeBox {
  margin-bottom: 20px;
}
i {
  margin-right: 5px;
}
h2 {
  font-size: 25px;
  font-weight: 550;
  margin: 20px 0;
}
.contenttext{
  text-indent: 2em;
}
</style>